<template>
  <div class="analyze">
      <div class="header">
        <el-form :model="queryParams" ref="queryForm"  v-show="showSearch" :inline="true"  label-width="68px">
            <el-form-item label="考试名称" prop="recordName" class="recordName">
               <el-input
                class="recordName"
                v-model="queryParams.recordName"
                placeholder="请输入考试名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="考试时间" class="recordName">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" 
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

      </div>
      <div class="middle">
        <AnalyzeLineCharts class="middleOne" :handleOfficeLineCharts="handleOfficeLineCharts" :chart-data="allLineChartOne"/>
        <AnalyzeOfficeLineCharts class="middleOne" :handlepropleLineCharts="handlepropleLineCharts" :chart-data="OfficeLineChart"/>
        <AnalyzePeopleLineCharts class="middleOne" :handlePercentPeopleLineChart="handlePercentPeopleLineChart" :chart-data="propleLineChart"/>
      </div>
      <div class="footer" id="recordName">
        <AnalyzePercentDeptLineChart class="middleOne" :handlePercentOfficeLineChart="handlePercentOfficeLineChart" :chart-data="percentDeptLineChart"/>
        <AnalyzePercentDeptLineChart class="middleOne" :handlePercentOfficeLineChart="handlePercentOfficeLineChart" :chart-data="percentOfficeLineChart"/>
        <AnalyzePercentPeopleLineChart class="middleOne" :chart-data="percentPeopleLineChart"/>
      </div>
</div>      
</template>

<script>
import { getUsers } from "@/api/work/process"
import { queryLineChartsOne,queryOffice,queryGrade,queryPercentDeptSuo,queryPercentDeptShi,queryPercentPeople} from "@/api/ability/analyze";
import { getToken } from '@/utils/auth';
import echarts from 'echarts';
import AnalyzeLineCharts from '../analyze/lineCharts/AnalyzeLineCharts';
import AnalyzeOfficeLineCharts from '../analyze/lineCharts/AnalyzeOfficeLineCharts';
import AnalyzePeopleLineCharts from '../analyze/lineCharts/AnalyzePeopleLineCharts';
import AnalyzePercentDeptLineChart from '../analyze/lineCharts/AnalyzePercentDeptLineChart';
import AnalyzePercentPeopleLineChart from '../analyze/lineCharts/AnalyzePercentPeopleLineChart';




export default {
    name: "analyze",
    components:{
        AnalyzeLineCharts,
        AnalyzeOfficeLineCharts,
        AnalyzePeopleLineCharts,
        AnalyzePercentDeptLineChart,
        AnalyzePercentPeopleLineChart
    },
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            allLineChartOne:{},
            OfficeLineChart:{},
            propleLineChart:{},
            percentDeptLineChart:{},
            percentOfficeLineChart:{},
            percentPeopleLineChart:{},
            PieData:{},
            OfficePieData:{},
            PeopePieData:{},
            // 查询参数
            queryParams: {
                // dateRange: [],
                recordName: null,
            
            },
        }
    },
    created() {
        this.getList();
    },
    mounted () {
        let that = this
        this.handleLineChartsOne();
        this.handleOfficeLineCharts();
        this.handlepropleLineCharts();
        this.handlePercentDeptLineChart(); 
        this.handlePercentOfficeLineChart();
        this.handlePercentPeopleLineChart();
    },
    activated(){
    
    },
    methods: {
        /** 查询所有图表 */
        getList() {
            this.loading = true;
            console.log("this.queryParams:"+JSON.stringify(this.queryParams));
            this.queryParams.deptId = "";
            this.handleOfficeLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handlepropleLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handleLineChartsOne(this.addDateRange(this.queryParams,this.dateRange));      
            this.handlePercentDeptLineChart(this.addDateRange(this.queryParams,this.dateRange));
            this.handlePercentOfficeLineChart(this.addDateRange(this.queryParams,this.dateRange));
            this.handlePercentPeopleLineChart(this.addDateRange(this.queryParams,this.dateRange));
            this.loading = false;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams.recordName = "";
            this.handleQuery();
            this.handleLineChartsOne();
            this.handleOfficeLineCharts();
            this.handlepropleLineCharts();
            this.handlePercentDeptLineChart();
            this.handlePercentOfficeLineChart();
            this.handlePercentPeopleLineChart();
        },
        // 柱状图1
        handleLineChartsOne(params){
            queryLineChartsOne(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                    newObject.bdata.push(item.relCount)//实考人数
                })
                this.allLineChartOne = newObject;  //console.log("------"+this.LineChartOne.adata+""+this.LineChartOne.bdata);
            });
        },
        // 查询科室的考试成绩柱状图
        handleOfficeLineCharts(params){
            queryOffice(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    // newObject.adata.push(item.allCount)//应考人数
                    // newObject.bdata.push(item.relCount)//实考人数
                    newObject.bdata.push(item.noPeople)//未考试人员信息
                })
                this.OfficeLineChart = newObject
            });
        },
        // 查询人员
        handlepropleLineCharts(params){
            // console.log("params"+JSON.stringify(params));
            queryGrade(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    udata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.udata.push(item.userId)
                })
                this.propleLineChart = newObject
                // console.log("------"+this.propleLineChart.zdata);
            });
        },
         //查询所的考试实考与应考占比柱状图
        handlePercentDeptLineChart(params){
            queryPercentDeptSuo(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    
                })
                newObject.adata.push("各所实考比率")
                this.percentDeptLineChart = newObject
            });
        },
        //查询科室的考试实考与应考占比柱状图
        handlePercentOfficeLineChart(params){
            queryPercentDeptShi(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)          
                })
                newObject.adata.push("各室实考比率")
                this.percentOfficeLineChart = newObject
            });
        },
        // 查询人员考试内容及分数
        handlePercentPeopleLineChart(params){
            queryPercentPeople(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                })
                this.percentPeopleLineChart = newObject
            });
        }
    },

  
    
};
</script>
<style>
.recordName .el-form-item__label{
    color:#fff;
    font-size: 12px;
} 
.recordName .el-input--small .el-input__inner{
    background-color: #1f2d3d;
    color: #fff;
}
.recordName .el-range-editor.el-input__inner{
    background-color: #1f2d3d;
}
.recordName .el-range-editor--small .el-range-input{
    background-color: #1f2d3d;
    color: #fff;

}
.analyze{
    padding: 1em;
    background-color: #1f2d3d;
}
.header{
    margin-left: 15px;
}
.middle{
    display: flex;
    justify-content: space-between;
    
}
.middleOne{
    background-image: url('./../../../assets/image/data1.png'); 
    background-size: 100% 100%;
    border-radius: 2%;
    margin-left:6px;
    margin-right:6px;
}

.footer{
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}
.GroupincomedistributionPie{
    width: 100%;
    height: 82%;
}

</style>